<template>
  <view 
    class="message-item"
    :class="messageClass"
  >
    <view class="message-avatar">
      <image 
        v-if="message.sender?.avatar" 
        :src="message.sender.avatar" 
        class="avatar-image"
        mode="aspectFill"
      />
      <text v-else class="avatar-text">{{ avatarText }}</text>
    </view>
    <view class="message-content">
      <view class="message-header">
        <text class="sender-name">{{ message.sender?.name || '系统' }}</text>
        <text class="message-time">{{ formattedTime }}</text>
      </view>
      <view class="message-body">
        <text v-if="message.type === 'text'" class="message-text">{{ message.content }}</text>
        <image v-else-if="message.type === 'image'" 
          :src="message.content" 
          class="message-image"
          mode="aspectFit"
          @click="$emit('preview-image', message.content)"
        />
        <view v-else-if="message.type === 'file'" class="message-file">
          <text class="file-icon">📎</text>
          <text class="file-name">{{ message.fileName }}</text>
        </view>
      </view>
      <view class="message-status" v-if="message.status && isMine">
        <text class="status-icon">{{ statusIcon }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MessageBubble',
  props: {
    message: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    messageClass() {
      return this.isMine ? 'message-mine' : 'message-other'
    },
    avatarText() {
      return this.message.sender?.name?.charAt(0) || 'U'
    },
    formattedTime() {
      if (!this.message.timestamp) return ''
      const date = new Date(this.message.timestamp)
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },
    statusIcon() {
      const statusMap = {
        sending: '⏳',
        sent: '✓',
        delivered: '✓✓',
        read: '✓✓',
        failed: '❌'
      }
      return statusMap[this.message.status] || ''
    }
  }
}
</script>

<style scoped>
.message-item {
  display: flex;
  padding: 16rpx 20rpx;
  gap: 16rpx;
}

.message-mine {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 72rpx;
  height: 72rpx;
  flex-shrink: 0;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-text {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.message-mine .message-content {
  align-items: flex-end;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.message-mine .message-header {
  flex-direction: row-reverse;
}

.sender-name {
  font-size: 22rpx;
  color: #999;
}

.message-time {
  font-size: 20rpx;
  color: #ccc;
}

.message-body {
  background: white;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.message-mine .message-body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.message-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  word-break: break-word;
}

.message-mine .message-text {
  color: white;
}

.message-image {
  max-width: 400rpx;
  max-height: 400rpx;
  border-radius: 8rpx;
}

.message-file {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 12rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
}

.file-icon {
  font-size: 32rpx;
}

.file-name {
  font-size: 24rpx;
  color: #666;
}

.message-status {
  display: flex;
  justify-content: flex-end;
}

.status-icon {
  font-size: 18rpx;
  color: #999;
}

.message-mine .status-icon {
  color: rgba(255, 255, 255, 0.7);
}
</style>

